<template>
  <div class="head-nav-bar">
    <div class="head-nav-wrap">
      <div class="head-nav-bar-left">
        <div class="logo" @click="$router.push('/')"><img src="../../../public/logo.png" alt=""></div>
        <ul class="navigation">
          <li class="tabs-item" :class="{'is-active':$route.path==='/home'}">
            <router-link class="tabs-link" to="/home">首页</router-link>
          </li>
          <li class="tabs-item" :class="{'is-active':$route.path==='/task'}">
            <router-link class="tabs-link" to="/task">任务大厅</router-link>
          </li>
          <li class="tabs-item" :class="{'is-active':$route.path==='/add-task'}">
            <router-link class="tabs-link" to="/add-task">发布任务</router-link>
          </li>
        </ul>
      </div>
      <div class="head-nav-bar-right">
        <div class="user" v-if="is_login">
          <router-link class="message" slot="right" to="/message">
            <i class="red-point" v-if="userInfo.notice_count!=0">{{userInfo.notice_count}}</i>
            <i class="iconfont icon-ai-message"></i>
          </router-link>
          <router-link class="user-head image-wrap" to="/user"><img :src="userInfo.pic" alt=""></router-link>
        </div>
        <div class="login-reg" v-else>
          <router-link class="lr-link reg" to="/register">注册</router-link>
          <router-link class="lr-link login" to="/login">登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from '@/mixin/mixin'

export default {
  name: 'head-nav',
  mixins: [mixin],
  props: {},
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.head-nav-bar {
  height: 72px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18,18,18,.1);
  font-size: 16px;
  user-select: none;
}

.head-nav-wrap {
  /*width: 1000px;*/
  height: 100%;
  margin: 0 auto;
}

.head-nav-bar-left {
  float: left;
  .logo {
    float: left;
    img {
      height: 72px;
    }
  }
  .navigation {
    float: left;
    padding-left: 40px;
    .tabs-item {
      float: left;
      height: 100%;
    }
    .tabs-link {
      display: inline-block;
      padding: 0 10px;
      height: 69px;
      line-height: 72px;
      color: #333;
    }
    .is-active {
      border-bottom: 3px solid #1987fa;
      .tabs-link {
        font-weight: bold;
        color: #1987fa;
      }
    }
  }
}

.head-nav-bar-right {
  float: right;
  .user {
    padding: 16px 0;
    vertical-align: middle;
    .user-head {
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      box-shadow: 0 0 0 2px #f1f1f1;
    }
    .message {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      width: 40px;
      height: 40px;
      vertical-align: middle;
      .red-point {
        position: absolute;
        bottom: 50%;
        left: 50%;
        padding: 0 4px;
        box-sizing: border-box;
        border: 1px solid #fff;
        background-color: #F1403C;
        font-size: 12px;
        line-height: 16px;
        border-radius: 20px;
        color: #fff;
      }
      .iconfont {
        font-size: 24px;
        line-height: 40px;
        color: #546e7d;
      }
    }
  }
  .login-reg {
    .lr-link {
      display: inline-block;
      padding: 0 10px;
      margin-top: 19px;
      height: 30px;
      border-radius: 3px;
      font-size: 16px;
      line-height: 30px;
      border: 1px solid #1987fa;
    }
    .reg {
      color: #1987fa;
    }
    .login {
      margin-left: 20px;
      background-color: #1987fa;
      color: #fff;
    }
  }
}

</style>
